<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery基本语法</title>
</head>
<body>
<!--<div id="div">我是div</div>-->
<!--</body>-->
<!--<script src="js/jquery-3.3.1.min.js"></script>-->
<input type="button" id="btn" value="点我">
<br>
<!--<input type="text" id="input">-->


<ur>
    <li> 路飞</li>
    <li> 索隆</li>
    <li> 乌索普</li>

</ur>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // js对象->jq对象
    // let jsDiv=document.getElementById("div");
    // let jqDiv = $(div);
    // jq对象 -> js对象
    // let jqDiv = $("#div");
    // let jqDivElement = jqDiv[0];
    // let innerText = jqDivElement.innerText;
    // alert(innerText);

    // 单击事件
    //  $("#btn").click(function () {
    //      alert("点我干嘛?")
    //  });
    //
    //  // 获取焦点事件
    // // $("#input").focus(function () {
    // //     alert("你要输入数据了")
    // // });
    //
    // //失去焦点事件
    // $("#input").blur(function(){
    //     alert("你输入完成啦...");
    // });


    // 事件的绑定和解绑
    // $("#btn").on("click",function () {
    //     alert("点我干嘛?");
    // });
    //
    // // $("#btn").off("click");

    // 事件的切换
    // 方式一 单独定义
    // $("#div").mouseover(function () {
    //    $(this).css("background","red");
    // });
    // $("#div").mouseout(function () {
    //     $(this).css("background","blue");
    // });
    // 方式2 链式定义
    // $("#div").mouseover(function () {
    //     $(this).css("background","red");
    // }).mouseout(function () {
    //     $(this).css("background","blue");
    // });


    // 遍历操作
    // 方式一(传统方式):
    // $("#btn").click(function () {
    //    let lis = $("li");
    //    for (let i=0;i<lis.length;i++){
    //        alert(i+":"+lis[i].innerText)
    //    }
    // });

    //方式2对象.each()方法
    // $("#btn").click(function () {
    //    let lis = $("li");
    //     lis.each(function (index, ele) {
    //         alert(index+":"+ele.innerHTML);
    //     })
    // });

    //方式3$.each()方法
    // $("#btn").click(function () {
    //     let lis = $("li");
    //     $.each(lis,function (index, ele) {
    //         alert(index + ":" + ele.innerHTML);
    //     })
    // });

    //方式4 for of语句
    // $("#btn").click(function () {
    //     let lis = $("li");
    //     for (ele of lis){
    //
    //         alert(ele.innerHTML);
    //     }    });

























</script>
</html>